<template>
  <div class="accion">
    <el-tabs>
      <el-form ref="formInline" :model="formInline">
        <el-form-item label="用户id">
          <el-input
            v-model="formInline.user"
            placeholder="请输入用户id"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input
            v-model="formInline.username"
            placeholder="请输入用户昵称"
          ></el-input>
        </el-form-item>
        <el-button class="eaction" @click="hsubmet()">搜索</el-button>
        <el-button class="accosin" @click="reset">重置</el-button>
      </el-form>
      <el-table :data="list" style="width: 100%">
        <el-table-column fixed label="用户ID" prop="userId" style="width: 20%">
        </el-table-column>
        <el-table-column label="用户账号" prop="" style="width: 20%">
        </el-table-column>
        <el-table-column label="用户昵称" prop="nick" style="width: 20%">
        </el-table-column>
        <el-table-column label="消费金额" prop="" style="width: 20%">
        </el-table-column>
        <el-table-column label="订单数量" prop="" style="width: 20%">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          style="width: 20%"
          :filters="[
            { text: '已启用', value: '已启用' },
            { text: '已冻结', value: '已冻结' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template v-slot="{ row }">
            <el-tag
              :type="row.status === 'UnFreeze' ? 'success' : 'info'"
              disable-transitions
            >
              {{ formchreeze(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" style="width: 20%">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="tsmonte(row)"
              >查看</el-button
            >
            <el-button type="text" size="small">
              <span v-if="row.status == 'Freeze'" @click="hsubmita(row)"
                >解冻</span
              >
              <span v-else @click="hsubmit(row)">冻结</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
       <el-pagination
       class="lyx"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
        :page-sizes="[10,5, 15, 20]"
        :current-page.sync="q.index"
        :page-size="2"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-tabs>
  </div>
</template>

<script>
import { userlist, userfrost, userthawy } from "@/api/user";
import employeesConst from "@/constant/employees";
const hiretaxtMap = {};
employeesConst.hireaxt.forEach((item) => {
  hiretaxtMap[item.status] = item.value;
});

export default {
  data() {
    return {
      
      total:0,
      list: [],
      q: {
        index: 1,
        size: 10,
        userId:null,
        nick:''
      },

      formInline: {
        user:null,
      
        username:""
      },
    };
  },
  created() {
    this.loachont();
  },
  methods: {
    async loachont() {
      const res = await userlist(this.q);
      console.log(res);
      this.list = res.data.data;
       this.total = res.data.count-0
    },
    filterTag(value, row) {
      return row.status === value;
    },
    // 搜索
    hsubmet() {
         this.q.userId = this.formInline.user
          this.q.nick = this.formInline.username
          this.q.index = 1
      this.loachont()
    },
    // 查看
    tsmonte(row) {
      this.$router.push({
        path: "/home/elessent",
        query: { row },
      });
    },
    // 重置
    reset() {
      this.q.index = 1
      this.formInline.user = null;
      this.formInline.username = "";
      this.q.nick = '',
      this.q.userId = null
      this.loachont();
    },
    // 冻结
    hsubmit(row) {
      this.$confirm("您确定要冻结么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const params = new URLSearchParams();
        params.append("userId", row.userId);
        const res = await userfrost(params);
        if (res.code !== 200) return;
        this.$message.success(res.msg);
        this.loachont();
      });
    },
    // 解冻
    hsubmita(row) {
      this.$confirm("您确定要解冻么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const params = new URLSearchParams();
        params.append("userId", row.userId);
        const res = await userthawy(params);
        if (res.code !== 200) return;
  
        this.$message.success(res.msg);
        this.loachont();
      });
    },
    // 状态
    formchreeze(code) {
      return hiretaxtMap[code];
    },
    // 分页
     // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachont();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachont();
    },
  },
};
</script>

<style scoped>
.el-table__cell,
.has-gutter {
  line-height: 60px;
}
.accion {
  background-color: #fff;
  padding: 0 30px;
}
.el-input {
  width: 70%;
  height: 30px;
}
.el-form-item {
  margin-left: 20px;
  display: inline-block;
  width: 20%;
}
.el-form-item__content {
  width: 100%;
}
.el-form {
  line-height: 50px;
}
.el-range-editor {
  width: 60%;
}
.hitemee {
  width: 30%;
}
.el-button--text {
  color: #ff7144;
}
.eaction {
   background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
   border: 1px solid #ff7144;
  color: #fff;
}
.eaction:active{
  border-color: #ff7144;
}
.accosin:hover {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.accosin:focus {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
</style>
